<template>
  <div class="c-model" v-if="showPageModel">
    <u-modal
      :show="isModelShow"
      :title="modelData.title"
      :showCancelButton="modelData.showCancelButton"
      :width="modelData.width"
      :negativeTop="modelData.negativeTop"
      :confirmText="modelData.confirmText"
      :cancelText="modelData.cancelText"
      :confirmColor="modelData.confirmColor"
      :buttonReverse="modelData.buttonReverse"
      :zoom="modelData.zoom"
      :closeOnClickOverlay="modelData.closeOnClickOverlay"
      :asyncClose="modelData.asyncClose"
      @confirm="modelData.confirm"
      @cancel="modelData.cancel"
      @close="modelData.close"
    >
      <rich-text :nodes="modelData.content"></rich-text>
    </u-modal>
  </div>
</template>

<script>
export default {
  name: 'CModel',
  props: {
    /**
     * 为了性能考虑默认model框是不开启的,当然你可以在当前page中使用showPageModel:true来开启本页面的model
     * 在使用的page页面中使用this.$setModel(config)配置model
     * this.$showModel()显示model
     *
     */
    showPageModel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isModelShow: false,
      modelData: {
        title: '',
        content: '',
        confirm: () => {
          this.isModelShow = false
        },
        close: () => {
          this.isModelShow = false
        },
        cancel: () => {
          this.isModelShow = false
        },
        showCancelButton: true,
        confirmText: '确认',
        cancelText: '取消',
        confirmColor: '#BEDB63',
        buttonReverse: false,
        zoom: true,
        closeOnClickOverlay: false,
        asyncClose: false,
        negativeTop: 0,
        width: '520rpx',
        isClose: false,
        isCancel: false
      }
    }
  },
  methods: {
    show() {
      this.isModelShow = true
    },
    unShow() {
      this.isModelShow = false
    },
    setModel(options) {
      const {
        title,
        content,
        confirm,
        cancel,
        confirmText,
        cancelText,
        confirmColor,
        buttonReverse,
        zoom,
        closeOnClickOverlay,
        asyncClose,
        negativeTop,
        width,
        showCancelButton,
        close,
        isClose,
        isCancel
      } = options
      this.modelData.title = title
      this.modelData.content = content

      if (confirm) this.modelData.confirm = confirm
      if (cancel) this.modelData.cancel = cancel
      if (confirmText) this.modelData.confirmText = confirmText
      if (cancelText) this.modelData.cancelText = cancelText
      if (confirmColor) this.modelData.confirmColor = confirmColor
      if (buttonReverse) this.modelData.buttonReverse = buttonReverse
      if (showCancelButton) this.modelData.showCancelButton = showCancelButton
      if (zoom) this.modelData.zoom = zoom
      if (closeOnClickOverlay)
        this.modelData.closeOnClickOverlay = closeOnClickOverlay
      if (asyncClose) this.modelData.asyncClose = asyncClose
      if (negativeTop) this.modelData.negativeTop = negativeTop
      if (width) this.modelData.width = width
      if (close) this.modelData.close = close
      if (isClose) this.modelData.isClose = isClose
      if (isCancel) this.modelData.close = isCancel
    }
  }
}
</script>

<style lang="scss" scoped></style>
